import React, { useRef,useState } from 'react'
import Icon from '@/components/Icons'
import styles from './index.module.less'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { SearchBarRef } from 'antd-mobile/es/components/search-bar'
const HeaderSearch: React.FC = () => {
  const searchRef = useRef<SearchBarRef>(null)
  const [showSearchBar, setShowSearchBar] = useState<boolean>(false)
  return (
    <div className={styles.headerSearch}>
      {
        !showSearchBar && (
            <div className={styles.searchLogo}>
            <Icon size='90px' iconName='icon-xiaohongshushu' />
          </div>
        )
      }
      <div className={styles.rightIcon} style={showSearchBar?{flex:1}:{}}>
        {
          showSearchBar ? (
            <SearchBar
          placeholder='请输入内容'
          showCancelButton={() => true}
          ref={searchRef}
          onSearch={val => {
            Toast.show(`你搜索了：${val}`)
          }}
          onCancel={() => {
            console.log('取消搜索')
            setShowSearchBar(false)

          }}
        />
          ): (
            <Icon onClick={()=>{
                setShowSearchBar(true)
              }} size='24px' iconName='icon-sousuo' />
          )
        }
       
      </div>
    </div>
  )
}
export default HeaderSearch
